import React, {Component} from 'react';

import {
  View,
  Image,
  Text,
  TextInput,
  TouchableOpacity,
  FlatList,
} from 'react-native';
import MCV from './MCV';
export default class DiaryList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      diaryList: [],
    };
    this.updataSearchKeyword = this.updataSearchKeyword.bind(this);
  }
  updataSearchKeyword(newWord) {
    //将用户输入的搜索关键字交给上层组件处理，List只做关键字过滤显示
    this.props.searchKeyword(newWord);
  }
  render() {
    console.log('list:', this.props.diaryList);
    return (
      <View style={MCV.container}>
        <View style={MCV.firstRow}>
          <View style={{borderWidth: 1}}>
            <TextInput
              autoCapitalize="none"
              placeholder="输入搜索关键字"
              clearButtonMode="while-editing"
              onChangeText={this.updataSearchKeyword}
              style={MCV.searchBarTextInput}></TextInput>
          </View>
          <TouchableOpacity onPress={this.props.writeDiary}>
            <Text style={MCV.middleButton}>开始输入</Text>
          </TouchableOpacity>
        </View>
        <View style={MCV.diaryBodyStyle}>
          <FlatList
            data={this.props.diaryList}
            renderItem={({item}) => (
              <TouchableOpacity
                onPress={this.props.selectItem}
                onLongPress={this.props.deleteItem(item.uid)}>
                <View style={MCV.secondRow}>
                  <Image style={MCV.moodStyle} source={item.mood} />
                  <View style={MCV.subViewInReader}>
                    <Text style={MCV.textInReader}>{item.title}</Text>
                    <Text style={MCV.textInReader}>{item.createDate}</Text>
                  </View>
                </View>
              </TouchableOpacity>
            )}
          />
        </View>
      </View>
    );
  }
}
